<template>
  <div class="store">
      <van-cell v-for="item in storeList" :key="item.id" @click="gotoProfile(item.id)">
        <template #icon>
          <van-image
            width="73"
            height="75"
            fit="cover"
            position="center"
            class="img"
            :src="item.image_path"
          />
        </template>
        <template #title>
          <div class="top">
            <div class="left">
              <span class="brand">品牌</span>
              <div class="title">{{ item.name }}</div>
            </div>
            <ul class="ticket">
              <li>保</li>
              <li>准</li>
              <li>票</li>
            </ul>
          </div>
        </template>
        <template #label>
          <div class="describe">
            <div class="left">
              <span class="star">
                <van-rate
                  v-model="item.rating"
                  color="#ff9a0d"
                  allow-half
                  size="10px"
                />
              </span>
              <span class="score">{{ item.rating.toFixed(1) }}</span>
              <span class="sales-count">月售{{ item.recent_order_num }}单</span>
            </div>
            <div class="right">
              <span class="delivery_left">峰鸟专送</span>
              <span class="delivery_right">准时达</span>
            </div>
          </div>
          <div class="message">
            <div class="cost">
              ￥{{ item.float_minimum_order_amount }}起送 / {{ item.tips }}
            </div>
            <div class="distance-time">
              {{ item.distance }} / {{ item.order_lead_time }}
            </div>
          </div>
        </template>
      </van-cell>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
import { useRouter } from 'vue-router'

defineProps({
  storeList: {
    typs: Array,
    default: () => ([])
  }
})

// 跳转详情页面
const router = useRouter()
const gotoProfile = id => {
  router.push(`/profile/${id}`)
}

</script>

<style scoped lang="less">
.store {
  padding: 0px 20px 0;
  background-color: #fff;
}

.van-cell {
  width: 100%;
  padding: 30px 0;

  .img {
    margin-right: 20px;
  }

  &::after {
    width: 100%;
    left: 0;
    border-bottom: 6px solid #f1f1f1;
  }

  .top {
    display: flex;
    justify-content: space-between;

    .left {
      display: flex;
      width: 430px;

      .brand {
        width: 52px;
        height: 30px;
        margin-right: 10px;
        background-color: #ffd930;
        color: #000;
        font-size: 22px;
        border-radius: 4px;
        line-height: 34px;
      }

      .title {
        color: #333;
        max-width: 360px;
        font-size: 32px;
        line-height: 32px;
        font-weight: 700;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }

    .ticket {
      display: flex;
      width: 110px;
      border: 2px solid #f1f1f1;
      border-radius: 4px;
      color: #999;

      li {
        margin-left: 4px;
      }
    }
  }

  .describe {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 16px;

    .left {
      .score {
        margin-left: 8px;
        color: #ff6000;
        font-size: 20px;
      }

      .sales-count {
        margin-left: 10px;
        font-size: 20px;
        color: #666;
      }
    }

    .right {
      .delivery_left {
        margin-right: 10px;
        color: #fff;
        background-color: #49b9ff;
        border: 2px solid #49b9ff;
        font-size: 20px;
        border-radius: 4px;
      }

      .delivery_right {
        color: #49b9ff;
        background-color: #fff;
        border: 2px solid #49b9ff;
        font-size: 20px;
        border-radius: 4px;
      }
    }
  }

  .message {
    display: flex;
    justify-content: space-between;
    color: #666;
    font-size: 24px;
  }
}
</style>
